<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content">
        <div class="col-lg-12">
            <h3 class="page-header" id="comercio">
                Administracion de 
                <h:outputText value="Sereno" style="color:#00BFFF;" />
                <h:link value="Regresar a Listado" outcome="list.xhtml" styleClass="pull-right" style="font-size: 16px; margin-right: 30px;"  />
            </h3>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p:tabView id="tabView">
                    <p:tab id="tab1" title="Datos">
                        <h:messages id="msg" globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                    errorClass="list-group-item list-group-item-danger" />
                        <div class="panel-body">
                            <div class="row" id="modificarComercio">
                                <div class="col-lg-8 col-lg-offset-1">
                                    <h:form id="frmRegistrarUser" styleClass="form-horizontal" >
                                        <f:event type="preRenderView" listener="#{serenoBean.initUpdate()}" />
                                        <div class="form-group has-feedback">
                                            <label for="nombre" class="col-sm-5 control-label" style="text-align: right;">Nombre :</label>
                                            <div class="col-sm-5">
                                                <p:inputText styleClass="form-control" id="nombre" value="#{serenoBean.sereno.nombre}" maxlength="60"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>						    
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="apellido" class="col-sm-5 control-label" style="text-align: right;">Apellido :</label>
                                            <div class="col-sm-5">
                                                <p:inputText styleClass="form-control" id="apellido" value="#{serenoBean.sereno.apellido}" maxlength="80"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="dni" class="col-sm-5 control-label" style="text-align: right;">Dni :</label>
                                            <div class="col-sm-5">
                                                <p:inputMask  styleClass="form-control" id="dni" value="#{serenoBean.sereno.dni}" mask="99999999"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="fNac" class="col-sm-5 control-label" style="text-align: right;">Fecha Nacimiento :</label>
                                            <div class="col-sm-5">
                                                <p:calendar  value="#{serenoBean.fecha}" locale="es" id="fNac"  navigator="true" 
                                                             readonlyInput="true"  showOn="button" pattern="dd/MM/yyyy" maxdate="#{serenoBean.fechaPemitida}"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>						
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="dep" class="col-sm-5 control-label" style="text-align: right;">Departamento :</label>
                                            <div class="col-sm-5">
                                                <h:selectOneMenu id="depar" value="#{serenoBean.idDepartamento}" styleClass="form-control" >
                                                    <f:selectItems value="#{serenoBean.departamentos}" var="list" itemLabel="#{list.label}" itemValue="#{list.value}"/>
                                                    <f:ajax  event="change" render="pro dist" listener="#{serenoBean.cambiarDepartamentos}" />
                                                </h:selectOneMenu>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>						
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="pro" class="col-sm-5 control-label" style="text-align: right;">Porvincia :</label>
                                            <div class="col-sm-5">
                                                <h:selectOneMenu id="pro" value="#{serenoBean.idProvincia}" styleClass="form-control" >
                                                    <f:selectItems value="#{serenoBean.provincias}" var="list" itemLabel="#{list.label}" itemValue="#{list.value}"/>
                                                    <f:ajax event="change" render="dist" listener="#{serenoBean.cambiarProvincias}"/>
                                                </h:selectOneMenu>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>						
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="dist" class="col-sm-5 control-label" style="text-align: right;">Distrito :</label>
                                            <div class="col-sm-5">
                                                <h:selectOneMenu id="dist" value="#{serenoBean.idDistrito}" styleClass="form-control" >
                                                    <f:selectItems value="#{serenoBean.distritos}" var="list" itemLabel="#{list.label}" itemValue="#{list.value}"/>
                                                </h:selectOneMenu>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>						
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="direc" class="col-sm-5 control-label" style="text-align: right;">Dirección :</label>
                                            <div class="col-sm-5">
                                                <p:inputText styleClass="form-control" id="direc" value="#{serenoBean.sereno.direccion}" maxlength="200"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="correo" class="col-sm-5 control-label" style="text-align: right;">Correo :</label>
                                            <div class="col-sm-5">
                                                <p:inputText styleClass="form-control" id="correo" value="#{serenoBean.sereno.correo}" maxlength="100"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="telef" class="col-sm-5 control-label" style="text-align: right;">Telefono :</label>
                                            <div class="col-sm-5">
                                                <p:inputMask styleClass="form-control" id="telef" value="#{serenoBean.sereno.telefono}" mask="9999999"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="celu" class="col-sm-5 control-label" style="text-align: right;">Celular :</label>
                                            <div class="col-sm-5">
                                                <p:inputMask styleClass="form-control" id="celu" value="#{serenoBean.sereno.celular}" mask="999999999"/>
                                                <span class="glyphicon-remove form-control-feedback">
                                                    <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="talla" class="col-sm-5 control-label" style="text-align: right;" >Talla :</label>
                                            <div class="col-sm-5">
                                                <pe:inputNumber value="#{serenoBean.sereno.talla}" maxValue="2" symbolPosition="s"  symbol=" m" />
                                            </div>						
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="peso" class="col-sm-5 control-label" style="text-align: right;" >Peso :</label>
                                            <div class="col-sm-5">
                                                <pe:inputNumber value="#{serenoBean.sereno.peso}" symbol=" kg" symbolPosition="s" maxValue="100"/>
                                            </div>						
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-8">
                                                <code>(*) Campos obligatorios</code>
                                            </div>
                                        </div>
                                        <p:commandButton value="Actualizar" styleClass="btn btn-primary" actionListener="#{serenoBean.actualizarPerro}" update="@form :tabView:msg" 
                                                         onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock();subir();"/>
                                        <pe:blockUI   widgetVar="blockUIWidget">  
                                            <h:panelGrid columns="2">  
                                                <h:graphicImage library="image" name="cargar.gif"  
                                                                style="margin-right: 5px; vertical-align: middle;"/>  
                                                <h:outputText value="Espere ..." style="white-space: nowrap;"/>  
                                            </h:panelGrid>  
                                        </pe:blockUI>  
                                    </h:form>
                                </div>
                            </div>
                        </div>
                    </p:tab>
                    <p:tab id="tab2" title="Imagen">  
                        <div class="row" id="modificarImagen">
                            <div class="col-lg-8 col-lg-offset-1">
                                <h:messages id="msgg" globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                            errorClass="list-group-item list-group-item-danger" />
                                <br />
                                <p:graphicImage id="image" value="/img/#{serenoBean.sereno.foto}" />
                                <h:form id="frmFoto" enctype="multipart/form-data">
                                    <p:fileUpload fileUploadListener="#{serenoBean.subirFoto}"
                                                  mode="advanced" 
                                                  multiple="false" 
                                                  sizeLimit="10240000"
                                                  update=":tabView:msgg :tabView:image"
                                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                                  auto="false" 
                                                  cancelLabel="Cancelar" uploadLabel="Subir" label="Escoger"/>  
                                </h:form>
                            </div>
                        </div>
                    </p:tab>
                </p:tabView>                
            </div>
        </div>
        <script>
            function subir() {
                window.scrollTo(0, 0);
            }
        </script>
    </ui:define>
</ui:composition>
